<template>
	<view>
		<rf-topSearch headNavigationType="2" @fan="fan"></rf-topSearch>
		<!-- 隐藏砍价 -->
		<view class="payment " v-show="isShow">
				<view class="tpp">
					<view class="title">
						恭喜你
					</view>
					<view class="del" @click="isShow=false">
					 <image src="../../static/kj11.png" mode=""></image>
					</view>
					<view class="to">
						<image src="../../static/kj12.png" mode=""></image>
					</view>
					<view class="text">
						已砍 <span class="sp1">{{gteNum(bargain_money)}}元,</span>剩 <span class="sp2">{{gteNum(( +deal_money)*100/+activity_money)}}%</span> 免费拿
					</view>
					<view class="mon">
						<view class="con">
							砍到0元拿
						</view>
						<view class="jiao"></view>
					</view>
					<view class="tiao">
						<view class="tiao1" :style="{'width': 100-gteNum(( +deal_money)*100/+activity_money)+'%'}"></view>
					</view>
				</view>
				<view class="ft">
					<view class="ft1">
						快分享给好友,可以免费拿哦
					</view>
					<view class="bt1"  @click="submitOrder()">
						去分享
					</view>
				</view>
		    </view>
			
		 <view class="top" v-if="bargainingData.length == 0">
			<image src="../../static/kanjia.png" mode=""></image>
		</view>
		<view class="Normal" v-if="bargainingData.length !=0">
			<view class="non" v-for="(items,index) in bargainingData" :key="index">
				<view class="top">
					<image src="../../static/kanjiajx.png" mode=""></image>
					<view class="cont">
						正在进行中
					</view>
				</view>
				<view class="foot1">
					<view class="left">
							<image :src="items.product.picture" mode=""></image>
					</view>
					<view class="text">
						已砍 <span class="sp1">{{gteNum(+items.config.activity_money - items.deal_money)}}元,</span> 只差<span class="sp2">{{gteNum(( +items.deal_money)*100/+items.config.activity_money)}}%</span>
					</view>
					<view class="tiao">
						<view class="tiao1" :style="{'width': 100-gteNum(( +items.deal_money)*100/+items.config.activity_money)+'%'}"></view>
					</view>
					<view class="time">
						<view class="cn">
							赶紧邀请小伙伴来砍一刀吧
						</view>
					</view>
					<view class="again" @click="mybar(items.id)" v-if="+items.deal_money != 0">
						继续砍价
					</view>
					<view class="again" @click="buy(items.sku_id,items.product_id)" v-else>
						立即下单
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="ftt" v-if="bargainData.length!=0">
				<view class="con" v-for="(items,index) in bargainData" :key="index">
					<view class="cc">
						<image :src="items.product.picture" mode=""></image>
					</view>
					<view class="cc1">
						{{items.product.name}}
					</view>
					<view class="cc2" @click="free(items.sku_id,items.product_id,items.product.picture,items.product.name)">
						点击免费拿
					</view>
				</view>
			</view>
		</view>
		<qr-code-share :shareType='shareType' :shareUrl="shareUrl" @isShowShare="isShowShare" v-if="share" :shareimg='productPicture' :shareTitle='productName'/>
	</view>
</template>

<script>
	import qrCodeShare from '@/components/qr-code-share/qr-code-share';
	import topSearch from "@/components/rf-topSearch/rf-topSearch"
	import { bargainIndex,bargainCreate,bargainHelp, } from "@/api/product";
	import {hostUrl} from "@/api/params";
	export default {
		components: {qrCodeShare,topSearch},
		data() {
			return {
				share:false,
				shareType:'h5',
				shareUrl:'',
				productPicture:'',
				productName:'',
				isShow:false,
				isShow1:false,
				bargainData:[],
				bargainingData:[],
				activity_money:0,
				bargain_money:0,
				deal_money:0,
			};
		},
		onLoad() {
			this.token = uni.getStorageSync('accessToken') || undefined;
			if (!this.token) {
        let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
        let curRoute = routes[routes.length - 1].route //获取当前页面路由
        let curParam = routes[routes.length - 1].options; //获取路由参数
        let param = '', i = 0;
        for (let key in curParam) {
          if (i==0){
            param += '?' + key + '=' + curParam[key];
          }else {
            param += '&' + key + '=' + curParam[key]
          }
          i++
        }
				uni.showModal({
					content: '会话已过期，是否跳转登录页面？',
					success: (confirmRes) => {
						if (confirmRes.confirm) {
							uni.navigateTo({
								url: '/pages/public/login?callbackUrl=/'+curRoute+param
							});
						}
					}
				});
				return
			}
			this.initData();
		},
		methods:{
			fan() {
				uni.switchTab({
					url: `/pages/index/index`
				})
			},
			gteNum(num){
				return parseFloat(num).toFixed(2)
			},
			free(skuId,productId,productPicture,productName) {
				this.productPicture = productPicture
				this.productName = productName
				let data = {
					productId:productId,
					skuId:skuId
				}
				this.$get(`${bargainCreate}`, data).then(r => {
					console.log(r)
					this.initData();
					if(r.code == 200){
						this.activity_money = r.data.activity_money;
						this.bargain_money = r.data.bargain_money;
						this.deal_money = r.data.deal_money;
						this.shareUrl = hostUrl +'/pages/bargain/other' + '?id='+ r.data.id;
						this.isShow = !this.isShow	
					}
					
				}).catch((err) => {
					console.log(err)
				});
		
				 
			},
			submitOrder() {
				 this.share = !this.share 
				 this.isShow = !this.isShow
			},
			buy(sku_id,product_id) {
				let list = {};
				let data = {};
				list.type = 'bargain';
				data.sku_id = sku_id;
				data.num = '1';
				list.data = JSON.stringify(data);

				uni.navigateTo({
					url: `/pages/order/create/order?data=${JSON.stringify(list)}`
				});
			},
			isShowShare(e){
				this.share = false;
			},
			mybar(id) {
				uni.navigateTo({
					url:"./mybargain?id="+id
				})
			},
			initData(){
				this.$get(`${bargainIndex}`, ).then(r => {
					console.log(r)
					this.bargainData = r.data.bargain;
					this.bargainingData = r.data.bargaining;					
				}).catch((err) => {
					console.log(err)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	//砍价进行
	.Normal {
		// margin-top: 30upx;
		// margin-left: 30upx;
		width: 100%;
		padding: 30upx;
		background-color: #E04131;
		.non {
			width: 100%;
			height: 400upx;
			background-color: #FFFFFF ;
			border-radius: 12px;
			margin-bottom: 20upx;
			.foot1 {
				width: 100%;
				height: 300upx;
				position: relative;
				.again {
					position: absolute;
					width: 380upx;
					height: 70upx;
					right: 70upx;
					bottom: 25upx;
					background:linear-gradient(90deg,rgba(255,48,48,1) 0%,rgba(255,0,0,1) 100%);
					border-radius:30px;
					color: #FFFFFF;
					text-align: center;
					line-height: 70upx;
				}
				.time {
					width: 58%;
					position: absolute;
					top: 130upx;
					left: 220upx;
					.cn {
						float: left;
						margin-left: 20upx;
						font-size: 24upx;
						margin-top: 4upx;
						line-height: 60upx;
						color: #FF0000;
						font-weight: bolder;
					}
					.tmm {
						width: 150upx;
						display: inline-block;
						// background-color: #f3f3f3;
						height: 40upx;
						float: left;
						margin-left: 20upx;
						font-size: 24upx;
						margin-top: 12upx;
						color:#FF0000;
						// background-color: #000;
						.one {
							float: left;
							height: 40upx;
							width: 40upx;
							background-color: #FF0000;
							color: #FFFFFF;
							border-radius: 3px;
							text-align: center;
							line-height: 40upx;
						}
						.mao {
							float: left;
							color: #FF0000;
							line-height: 40upx;
						}
						.two {
							float: left;
							height: 40upx;
							width: 40upx;
							background-color: #FF0000;
							color: #FFFFFF;;
							border-radius: 3px;
							text-align: center;
							line-height: 40upx;
						}
						.three {
							float: left;
							height: 40upx;
							width: 40upx;
							background-color: #FF0000;
							color: #FFFFFF;
							border-radius: 3px;
							text-align: center;
							line-height: 40upx;
						}
					}
				}
				.left {
					position: absolute;
					top: 40upx;
					left: 18upx;
					width: 200upx;
					height: 200upx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					  position: absolute;
					  left: 240upx;
					  top: 30upx;
					  // margin-top: 50upx;
					  color: #000000;
			     	  font-size: 15px;
					  float: right;
					  span {
							  margin-left: 7upx;
							  margin-right: 7upx;
							  color: #FF0000;
							  font-weight: bolder;
						  }
						
				}
				.tiao {
						  position: absolute;
						  top: 90upx;
						  left: 240upx;
						  width: 380upx;
						  height: 20upx;
						  border-radius: 10px;
						  background-color: #FFB6B6;
						  .tiao1 {
							  width: 360upx;
							  height: 100%;
							  border-radius: 10px;
							  background-color: #E00000;
						  }
				}
			}
			.top {
				position: relative;
				width: 100%;
				height: 100upx;
				background-color: #FF7463;
				border-radius: 12px 12px 0 0;
				image {
					position: absolute;
					top: 40upx;
					left: 160upx;
					width: 380upx;
					height: 20upx;
				}
				.cont {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					color: #FFFFFF;
					font-size: 32upx;
					letter-spacing:1px;
				}
			}
		}
	}
	//隐藏框1
	.payment1 {
	  position: absolute;
	  width: 80%;
	  height: 50%;
	  top: 30%;
	  left: 10%;
	  padding: 15upx;
	  box-sizing: border-box;
	 background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
	  // border: 1px solid #F3F3F3;
	  border-radius: 10px;
	  box-shadow: 0 0 100vh 100vh rgba(0,0,0,0.5);
	  z-index: 10;
	
		.tpp1 {
			position: relative;
			// background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
			width: 100%;
			height: 100%;
			border-radius: 10px;
			// margin: 10upx;
			border: 1px solid rgba(255,220,109,1);
			.ff {
				position: absolute;
				width: 400upx;
				color: #FFFFFF;
				bottom: 50upx;
				left: 90upx;
				font-size: 12px;
			}
			.erwei {
				position: absolute;
				width: 330upx;
				height: 330upx;
				padding: 10upx;
				top: 280upx;
				left: 120upx;
				background-color: #FFFFFF;
				border-radius: 10px;
				image {
					width: 100%;
					height: 100%;
				
				}
			}
			.sao {
				color: #FFFFFF;
				position: absolute;
				top: 200upx;
				left: 120upx;
				letter-spacing:1px;
				font-family:PingFangSC-Medium,PingFang SC;
				font-size: 16px;
			}
			.tex {
				color: #FFFFFF;
				position: absolute;
				top: 64upx;
				left: 220upx;
				width: 260upx;
				letter-spacing:1px;
				font-family:PingFangSC-Regular,PingFang SC;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.con {
				position: absolute;
				top: 40upx;
				left: 80upx;
				width: 106upx;
				height: 106upx;
				border-radius: 50%;
				background-color: #FFFFFF;
				image {
					width: 60upx;
					height: 80upx;
					position: absolute;
					left: 22upx;
					top: 15upx;
					// border-radius: 50%;
				}
			}
			.del {
				  position: absolute;
				  right: 25upx;
				  top: 25upx;
				  width: 30upx;
				  height: 30upx;
				  image {
					  width: 100%;
					  height: 100%;
					}
				}
		}
	}
	//隐藏框
	.payment {
	  position: absolute;
	  width: 600upx;
	  height: 700upx;
	  top: 30%;
	  left: 10%;
	  background-color: #FFFFFF;
	  // border: 1px solid #F3F3F3;
	  border-radius: 10px;
	  box-shadow: 0 0 100vh 100vh rgba(0,0,0,0.5);
	  z-index: 10;
	  .ft {
		  position: relative;
		  .ft1 {
			  position: absolute;
			  top: 50upx;
			  left: 125upx;
			  color: #FF0000;
			  font-family:PingFangSC-Medium,PingFang SC;
		  }
		  .bt1 {
			  position: absolute;
			  top: 150upx;
			  left: 100upx;
			  background:linear-gradient(180deg,rgba(255,0,0,1) 0%,rgba(226,0,0,1) 100%);
			  width: 400upx;
			  height: 70upx;
			  text-align: center;
			  line-height: 70upx;
			  border-radius: 15px;
			  color: #FFFFFF;
		  }
	  }
	  .mon {
		  position: absolute;
		  right: 50upx;
		  top: 220upx;
		  .con {
			  text-align: center;
			  width: 150upx;
			  background-color: #E00000;
			  border-radius: 5px;
			  color: #FFFFFF;
		  }
		  .jiao {
			  position: absolute;
			  left: 65upx;
			  width: 0;
			  height: 0;
			  border-top: 10upx solid #E00000;
			  border-bottom: 10upx solid transparent;
			  border-left: 10upx solid transparent;
			  border-right: 10upx solid transparent;
		  }
	  }
	  .tiao {
		  position: absolute;
		  top: 300upx;
		  left: 80upx;
		  width: 400upx;
		  height: 20upx;
		  border-radius: 10px;
		  background-color: #FFFFFF;
		  .tiao1 {
			  width: 380upx;
			  height: 100%;
			  border-radius: 10px;
			  background-color: #E00000;
		  }
	  }
	  .text {
		  position: absolute;
		  top: 100upx;
		  left: 10%;
		  color: #FFFFFF;
		  font-size: 30upx;
		  span {
			  font-size: 38upx;
			  margin-left: 7upx;
			  margin-right: 7upx;
		  }
		  .sp1 {
			  color: #FFDC38;
		  }
	  }
	  .to {
		  width: 400upx;
		  height: 350upx;
		  position: absolute;
		  top: -280upx;
		  left: 100upx;
		  image {
			  width: 100%;
			  height: 100%;
		  }
	  }
	.tpp {
		background-color: #FF6E6E;
		width: 100%;
		height: 55%;
		border-radius: 10px 10px 0 0;
		.title {
			position: absolute;
			top: -45upx;
			left: 40%;	
			z-index: 10;
			font-size: 44upx;
			color: #FFFFFF;
			font-weight: bolder;
		}
		.del {
			  position: absolute;
			  right: -25upx;
			  top: -25upx;
			  width: 60upx;
			  height: 60upx;
			  image {
				  transform: rotate(45deg);
				  width: 100%;
				  height: 100%;
				}
			}
	}
	}

	.top {
		width: 100%;
		height: 300upx;
		// background-color: #007AFF;
		image {
			width: 100%;
			height: 100%;
		}
	}
	//底部内容
	.foot {
		width: 100%;
		min-height: 1000upx;
		background:rgba(225,65,49,1);
		padding: 30upx;
		.ftt {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border:16px solid rgba(189,60,26,1);
			background:rgba(247,111,93,1);
			// box-shadow:0px 15px 0px 0px rgba(143,99,49,0.24), 0px 0px 120px 0px rgba(209,42,0,0.75);
			border-radius:40px;
			// overflow-x: hidden;
			overflow-y: auto;
			// white-space: nowrap;
			justify-content: space-between;
			.con {
				// float: left;
				margin-left: 20upx;
				margin-top: 20upx;
				width: 45%;
				height: 340upx;
				display: inline-block;
				position: relative;
				background:rgba(255,255,255,0.5);
				box-shadow:0px 0px 65px 0px rgba(255,169,158,0.75);
				border-radius:40upx;
				white-space: nowrap;
				.cc {
					position: absolute;
					top: 40upx;
					left: 50upx;
					width: 180upx;
					height: 140upx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				.cc1 {
					position: absolute;
					bottom: 45px;
					left: 50%;
					color: #F12C3F;
					font-weight: 500;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 94%;
					transform: translate(-50%,0);
					white-space: nowrap;
				
				}
				.cc2 {
					position: absolute;
					background:rgba(229,15,11,1);
					bottom: 30upx;
					left: 70upx;
					color:#FFFFFF;
					font-weight: 500;
					padding: 5upx;
					border-radius: 30upx;
					box-shadow:0px 0px 2px 0px rgba(174,32,32,0.75);
				}
			}
		}
	}
</style>
